<template>
  <ex-dialog
    width="70%"
    class="ex-diolog"
    title="预警同步"
    :visible="visible"
    @closeDialog="handleClose"
  >
    <div class="main_box">
      <div class="main_box_l">模版文件下载：</div>
      <span class="file_txt"
        ><a :href="img_url + '/excelmode/商家司法风险模版.xls'"
          >商家司法风险模版.xls</a
        ></span
      >
      <span class="file_txt"
        ><a :href="img_url + '/excelmode/商家行政处罚模版.xls'"
          >商家行政处罚模版.xls</a
        ></span
      >
      <span class="file_txt"
        ><a :href="img_url + '/excelmode/法人风险模版.xls'"
          >法人风险模版.xls</a
        ></span
      >
    </div>
    <div class="main_box">
      <div class="main_box_l" style="padding-top: 6px">商家司法风险：</div>
      <el-upload
        class="upload-demo"
        :action="action"
        :accept="accept"
        :on-success="judicialSuccess"
        :on-preview="handlePreview"
        :on-remove="handleRemoveOne"
        :before-remove="beforeRemove"
        multiple
        :limit="1"
        :on-exceed="handleExceed"
      >
        <el-button size="small" type="primary" icon="el-icon-upload"
          >上传文件</el-button
        >
      </el-upload>
    </div>
    <div class="main_box">
      <div class="main_box_l" style="padding-top: 6px">商家行政处罚：</div>
      <el-upload
        class="upload-demo"
        :action="action"
        :accept="accept"
        :on-preview="handlePreview"
        :on-remove="handleRemoveTwo"
        :before-remove="beforeRemove"
        :on-success="successTwo"
        multiple
        :limit="1"
        :on-exceed="handleExceed"
      >
        <el-button size="small" type="primary" icon="el-icon-upload"
          >上传文件</el-button
        >
      </el-upload>
    </div>
    <div class="main_box">
      <div class="main_box_l" style="padding-top: 6px">法人风险：</div>
      <el-upload
        class="upload-demo"
        :action="action"
        :accept="accept"
        :on-preview="handlePreview"
        :on-remove="handleRemoveThree"
        :before-remove="beforeRemove"
        :on-success="successThree"
        multiple
        :limit="1"
        :on-exceed="handleExceed"
      >
        <el-button size="small" type="primary" icon="el-icon-upload"
          >上传文件</el-button
        >
      </el-upload>
    </div>
    <template slot="footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="submitUpload">数据上传</el-button>
    </template>
  </ex-dialog>
</template>
<script>
// api
import { importExcel } from "@/api/merchants";
export default {
  props: {
    visible: Boolean,
    // id: String,
  },
  data() {
    return {
      img_url: this.$IMG_URL,
      data: {},
      action: process.env.VUE_APP_BASE_API + "/common/v1/uploadFile",
      // action: "",
      accept: ".xls,.xlsx",
      formUnload:{
        judicialRiskFile:'',//司法风险模版
        legalPersonRiskFile:'',//法人风险模版
        administrativePenaltyFile:"",//行政处罚模版
      },
    };
  },
  created() {
    // this.getDetail();
  },
  methods: {
    handleRemoveOne(file, fileList){
      this.formUnload.judicialRiskFile = ''
    },
    handleRemoveTwo(file, fileList){
      this.formUnload.administrativePenaltyFile = ''
    },
    handleRemoveThree(file, fileList){
      console.log(1111)
      this.formUnload.legalPersonRiskFile = ''
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      console.log(files);
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    
    judicialSuccess(res) { //商家司法风险
      console.log(res);
      this.formUnload.judicialRiskFile =  res.result.url
    },
    successTwo(res) { //商家行政处罚
      console.log(res);
      this.formUnload.administrativePenaltyFile =  res.result.url
    },
    successThree(res) {//法人风险
      console.log(res);
      this.formUnload.legalPersonRiskFile =  res.result.url
    },
    submitUpload() {
      if(this.formUnload.judicialRiskFile==''&&this.formUnload.administrativePenaltyFile==''&&this.formUnload.legalPersonRiskFile==''){
        this.$message({
          message: "请上传文件",
          type: "warning",
          duration: 1500,
        });
        return
      }
      var params = {
        ...this.formUnload,
      };
      importExcel(params).then((res) => {
        this.$message({
          message: "上传成功",
          type: "success",
          duration: 1500,
        });
        setTimeout(() => {
          this.$emit("update:visible", false);
        }, 1000);
      });
    },
    // getDetail() {
    //   getDetail(this.id).then((res) => {
    //     console.log("获取详情", res);
    //     const { result } = res;
    //     result.merchantTypeText = this.$getStatusText(
    //       "merchant_type",
    //       result.merchantType
    //     );
    //     result.statusText = this.$getStatusText(
    //       "account_status",
    //       result.status
    //     );
    //     result.applyStatusText = this.$getStatusText(
    //       "register_verify_status",
    //       result.applyStatus
    //     );

    //     this.data = result;
    //   });
    // },
    handleClose() {
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
  }
  .grid-layout {
    width: 560px;
    margin: 0 auto;
  }
  .img {
    display: block;
    width: 100px;
    height: auto;
  }
  .main_box {
    display: flex;
    padding: 0 40px;
    font-size: 16px;
    margin-bottom: 20px;
  }
  .file_txt {
    color: #1890ff;
    margin-right: 20px;
    cursor: pointer;
    font-size: 15px;
  }
  .file_txt:hover {
    opacity: 0.8;
  }
  .main_box_l {
    width: 120px;
    text-align: right;
  }
}
</style>
